<template>
  <div id="upload">
    <el-form :model="form" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" clearable @focus="setUploadFocus('title')"></el-input>
      </el-form-item>
      <el-form-item label="正文" prop="content">
        <el-input type="textarea" :rows="3" v-model="form.content"
                  @focus="setUploadFocus('content')" clearable></el-input>
      </el-form-item>
      <emoji></emoji>
    </el-form>
    <div>
      <label for="choose">
        <input id="choose" ref="upload" type="file" multiple @change="filesChange"/>
        <el-link type="primary" :underline="false">选择文件</el-link>
      </label>
      <el-link v-show="empty" disabled type="success" :underline="false">
        ( 已添加 {{ form.files.length }} 个 )
      </el-link>
      <div id="files">
        <div class="file" v-for="file in form.files" :key="file.name" :id="file.name">
          {{ file.name }}
          <i class="el-icon-close" @click="fileDelete(file.name)"></i>
        </div>
      </div>
      <el-button type="primary" plain @click="originUpload">上传</el-button>
    </div>
  </div>
</template>

<script>
import {find_el, is_empty, remove} from "@/util/funcutils";
import {message} from "@/util/message";
import {loading} from "@/util/loading";
import axios from "axios";
import Emoji from "@/components/emoji";
import {mapActions} from "vuex";

export default {
  name: "upload",
  components: {Emoji},
  data() {
    return {
      form: {
        title: '',
        content: '',
        files: [],
        loading: false
      },
      rules: {
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        content: [{required: true, message: '请输入正文', trigger: 'blur'},]
      }
    }
  },
  mounted() {
    this.$bus.$on('appendEmoji', (target, c) => {
      this.form[target] += c
    })
  },
  methods: {
    ...mapActions(['setUploadFocus']),
    empty() {
      return is_empty(this.form.files) || is_empty(this.form.title) || is_empty(this.form.content)
    },
    filesChange() {
      let files = this.$refs.upload.files
      for (let i = 0; i < files.length; i++) {
        let file = files[i]
        let exist = this.form.files.some(item => item.name === file.name)
        if (!exist) {
          this.form.files.push(file)
        }
      }
      this.$refs.upload.value = null;
    },
    fileDelete(name) {
      let el = find_el(this.form.files, 'name', name)
      remove(this.form.files, el.index)
    },

    originUpload() {
      if (this.empty()) {
        this.$message(message('warning', '请输入必填项'))
      } else {
        let load = loading('文件上传中...')
        let files = this.form.files
        let formData = new FormData();
        formData.append('title', this.form.title)
        formData.append('content', this.form.content)
        for (let i = 0; i < files.length; i++) {
          formData.append('files', files[i])
        }
        axios.post('/upload/files', formData)
            .then(res => {
              this.form.files = []
              this.form.content = ''
              this.form.title = ''
              load.close();
              this.$message(message(res.data.success, res.data.msg))
              this.$store.state.insertSuccess = true
            })
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  width: 90%;
  margin: 0 auto;
}

#choose {
  display: none;
}

#files {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.file {
  border: #67c13a 1px solid;
  border-radius: 5px;
  margin: 3px;
  padding: 3px 5px;
}

.el-button {
  margin: 20px auto 0;
  display: block;
}

.el-icon-close {
  margin-left: 2px;
}
</style>